<template>
	<view class="content">
		<view class="inputContent">
			<input placeholder="请输入您的昵称" class="input" maxlength="8" v-model="userName" @blur="sure" />
			<image src="../../static/recharge/close.png" class="closeImg"></image>
		</view>
		<view class="tips">请输入2～8个字，限中英文、数字或特殊符号</view>
	</view>
</template>

<script>
	import { updateUser } from '../../api/api.js'
	export default {
		data() {
			return {
				// 用户昵称
				userName:''
			}
		},
		onLoad(e) {
			this.userName = e.userName
		},
		onShow() {
			this.id = uni.getStorageSync('id')
		},
		methods: {
			sure() {
				let data = {
					userName:this.userName
				}
				updateUser(data).then( res=> {
					console.log()
					uni.showToast({
						icon:'none',
						title:'修改成功~'
					})
					setTimeout(function() {
						uni.navigateBack({
							delta:1
						})
					},1000)
				})
			}
		}
	}
</script>

<style lang="less">
	.content {
		.inputContent {
			position: relative;
			.input {
				margin-left: 30rpx;
				width: 690rpx;
				height:100rpx;
				border-bottom: 1rpx solid #F2F2F2;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #353535;
				line-height: 40rpx;
			}
			.closeImg {
				position: absolute;
				width: 36rpx;
				height: 36rpx;
				right: 30rpx;
				bottom: 33rpx;
			}
		}
		.tips {
			margin: 20rpx 0 0 30rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #808080;
			line-height: 33rpx;
		}
	}
</style>
